<template>
  <div class="container">
    <header-bg></header-bg>
    <!-- 登陆PC端 -->
    <div class="PC-login flex flex-between height-27" @click="$pt.navigateTo({url: '/pages/personal/pc-terminal/main'})">
      <div class="v-align-t">
        <img v-if="fileSpace" class="width-20 height-20" :src="fileSpace + '/images/PC-icon.png'" alt="">
        <span class="font-12 mar-l-7">登录PC电脑端</span>
      </div>
      <van-icon name="arrow" />
    </div>
    <!-- 用户信息 -->
    <div class="flex user-info-box pad-t-23 pad-l-15 pad-r-15">
      <div class="user-img-box">
        <img class="width-46 height-46" :src="avatar? avatar : 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2288077769,568175781&fm=26&gp=0.jpg'" alt="">
      </div>
      <div class="flex-col mar-l-10">
        <span class="font-16 font-white font-w">{{nickname}}</span>
        <span class="font-12 font-white">{{phone}}</span>
      </div>
    </div>
    <!-- 账号信息 -->
    <div class="account-info pad-l-15 pad-r-15 bg-color-white mar-t-15">
      <div class="wx-platform flex flex-between pad-b-16 pad-t-23">
        <div class="flex flex-center">
          <div class="width-20 height-20 flex flex-center icon-box">
            <img v-if="fileSpace" class="width-15 height-15" :src="fileSpace + '/images/anchor-wx-icon.png'" alt="" >
          </div>
          <span class="font-16 font-color-3 mar-l-7">微信号</span>
        </div>        
        <template v-if="listApply.length">
          <span class="font-12 font-color-3" v-if="wechatNo">{{wechatNo}}</span>
          <span class="font-12 font-white apply-btn" v-if="wechatStatues === 0">审核中</span>
          <span class="font-12 font-white apply-btn" v-if="wechatStatues === 2" @click="goApplyAnchor(1)">审核失败</span>
          <span class="font-12 font-white apply-btn" v-if="wechatStatues === ''" @click="goApplyAnchor(1)">立即申请</span>
        </template>
      </div>
      <div class="dy-platform flex pad-b-16 pad-t-23">
        <div class="width-20 height-20 flex flex-center icon-box mar-t-2">
          <img v-if="fileSpace" class="width-15 height-15" :src="fileSpace + '/images/dy-icon.png'" alt="" >
        </div>
        <div class="flex-col flex-item">
          <div class="flex flex-between">
            <span class="font-16 font-color-3 mar-l-7">抖音号</span>            
            <template v-if="listApply.length">
              <span class="font-12 font-color-3" v-if="douYinNo">{{douYinNo}}</span>
              <span class="font-12 font-white apply-btn" v-if="douYinStatues === 0">审核中</span>
              <span class="font-12 font-white apply-btn" v-if="douYinStatues === 2" @click="goApplyAnchor(2)">审核失败</span>
              <span class="font-12 font-white apply-btn" v-if="douYinStatues === ''" @click="goApplyAnchor(2)">立即申请</span>
            </template>
          </div>
          <div class="flex flex-between shop-info mar-t-4">
            <span class="font-13 font-color-9">小店</span>
            <span class="font-12 font-color-9" v-if="douYinShopName">{{douYinShopName}}</span>
            <span class="font-12 font-color-9" v-else @click="$pt.navigateTo({url: '/pages/personal/pc-terminal/main'})">(PC电脑端绑定)</span>
          </div>
        </div>
      </div>
      <div class="ks-platform flex pad-b-16 pad-t-23">
        <div class="width-20 height-20 flex flex-center icon-box mar-t-2">
          <img v-if="fileSpace" class="width-15 height-15" :src="fileSpace + '/images/ks-icon.png'" alt="" >
        </div>
        <div class="flex-col flex-item">
          <div class="flex flex-between">
            <span class="font-16 font-color-3 mar-l-7">快手号</span>            
            <template v-if="listApply.length">
              <span class="font-12 font-color-3" v-if="kuaiShouNo">{{kuaiShouNo}}</span>
              <span class="font-12 font-white apply-btn" v-if="kuaiShouStatues === 0 ">审核中</span>
              <span class="font-12 font-white apply-btn" v-if="kuaiShouStatues === 2" @click="goApplyAnchor(3)">审核失败</span>
              <span class="font-12 font-white apply-btn" v-if="kuaiShouStatues === ''" @click="goApplyAnchor(3)">立即申请</span>
            </template>
          </div>
          <div class="flex flex-between shop-info mar-t-4">
            <span class="font-13 font-color-9">小店</span>
            <span class="font-12 font-color-3" v-if="kuaiShouShopName">{{kuaiShouShopName}}</span>
            <span class="font-12 font-color-9" v-else @click="$pt.navigateTo({url: '/pages/personal/pc-terminal/main'})">(PC电脑端绑定)</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 联系客服按钮 帮助中心按钮 -->
    <div class="btn-group-box font-12 flex-center flex mar-t-19">
      <span @click="concatService">联系客服</span>
      <!-- <span class="mar-l-8 mar-r-8">|</span>
      <span @click="$pt.navigateTo({url: '/pages/personal/help/main'})">帮助中心</span> -->
    </div>
    <!-- 客服弹窗 -->
    <div v-if="layerBoolean" class="div-pop">
      <get-customer-layer :info="serviceInfo" @close="closeLayer"></get-customer-layer>
    </div>
  </div>
</template>

<script>
import headerBg from '@/components/headerBg'
import GetCustomerLayer from '@/components/GetCustomerLayer'
import { getAnchorInfo, getCustomerInfo, getAnchorApplyList } from '@/api/personal'
import { getByEnterpriseId } from '@/api/common'
import { setIsPerfectionInfo } from '@/utils/auth'
export default {
  components: { headerBg, GetCustomerLayer },
  data() {
    return {
      listApply: [],
      layerBoolean: false,
      serviceInfo: {}, // 客服信息
      avatar: '', // 头像
      nickname: '', // 昵称
      phone: '', // 手机号
      douYinNo: '', // 抖音号
      douYinStatues: '',
      douYinShopName: '', // 抖音小店 店名
      kuaiShouNo: '', // 快手号
      kuaiShouStatues: '',
      kuaiShouShopName: '', // 快手小店 店名
      wechatNo: '', // 微信号
      wechatStatues: ''
    }
  },
  mounted() {
    this.getByEnterpriseId(this.getEnterpriseId)
    this.getAnchorInfo()
    this.getAnchorApplyList()
  },
  methods: {
    getByEnterpriseId(enterpriseId) {
      // 获取企业参数配置
      if (!enterpriseId) return
      getByEnterpriseId({enterpriseId: enterpriseId}).then(response => {
        if (response.isError) return
        // response.data.isOpenAnchorCompulsoryPerfectionInfo = 0
        if (response.data.isOpenAnchorCompulsoryPerfectionInfo) {
          setIsPerfectionInfo(response.data.isOpenAnchorCompulsoryPerfectionInfo)
        } else {
          setIsPerfectionInfo(0)
        }
      }).catch({})
    },
    getAnchorApplyList() {
      if (!this.getCustomerId) return
      let data = {
        memberId: this.getCustomerId
      }
      getAnchorApplyList(data).then((response) => {
        if (response.isError) return
        this.listApply = response.data
        if (this.listApply.length) {
          this.listApply.forEach(item => {
            if (item.relationPlatform === 1) {
              this.wechatStatues = item.applyStatus
            }
            if (item.relationPlatform === 2) {
              this.douYinStatues = item.applyStatus
            }
            if (item.relationPlatform === 3) {
              this.kuaiShouStatues = item.applyStatus
            }
          })
        }
      }).catch(() => {
      })
    },
    getAnchorInfo() {
      if (!this.$pt.getStorageSync('anchorType')) return
      this.$pt.showLoading()
      getAnchorInfo(this.getCustomerId).then(res => {
        let data = res.data
        this.nickname = data.nickname
        this.phone = this.phoneFormat(data.phone)
        this.avatar = data.avatar
        this.douYinNo = data.douYinNo || ''
        this.douYinShopName = data.douYinShopName || ''
        this.kuaiShouNo = data.kuaiShouNo || ''
        this.kuaiShouShopName = data.kuaiShouShopName || ''
        this.wechatNo = data.wechatNo || ''
        this.$pt.hideLoading()
      }).catch(() => {
        this.$pt.hideLoading()
      })
    },
    // 联系客服
    concatService() {
      getCustomerInfo(this.getCustomerId).then(response => {
        if (response.isError) return
        this.serviceInfo = response.data
      }).catch((
      ) => {})
      this.layerBoolean = true
    },
    // 跳转到 主播申请页
    goApplyAnchor(type) {
      this.$pt.navigateTo({ url: `/pages/personal/apply-anchor/main?type=${type}&inPage=1` })
    },
    // 手机号处理
    phoneFormat(str) {
      let reg = /^(\d{3})\d*(\d{4})$/
      return str.replace(reg, '$1****$2')
    },
    // 监听客服弹窗关闭事件
    closeLayer() {
      this.layerBoolean = false
    }
  }
}
</script>

<style lang="less" scoped>
  .container {
    padding-top: 46rpx;
    .PC-login {
      width: 100%;
      background: #631BE4;
      position: fixed;
      top: 0;
      left: 0;
      color: #fff;
      padding: 6px 15px;
      box-sizing: border-box;
    }
    .user-info-box {
      .user-img-box {
        img {
          border-radius: 50%;
        }
      }
    }
    .account-info {
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      &>div {
        border-bottom: 1px solid #FAFAFA;
        .shop-info {
          background: #F7F7F7;
          padding: 10rpx 11rpx 9rpx 7.5rpx;
          border-radius: 5px;
        }
        .apply-btn {
            background: #7427ff;
            color: #fff;
            padding-left: 8px;
            padding-right: 8px;
            border-radius: 10px;
        }
      }
      .dy-platform {
        .icon-box {
          border-radius: 4px;
          background: #000;
        }
      }
      .wx-platform {
        .icon-box {
          border-radius: 4px;
          background: #09BB07;
        }
      }
      .ks-platform {
        .icon-box{
          border-radius: 4px;
          background: #FA9401;
        }
      }
    }
    .btn-group-box {
      color: #00A8FF;
    }
  }

</style>